<template>
	<div class="yp_myAccount">
		<div class="yp_myAccount_top">
			<img src="../assets/oneCenter01.png" />
			<p>您好,<span>xxxxxxx</span></p>
			<div class="yp_myAccount_money">
				<span>当前积分</span><span>0</span>
				<span>我的钱包</span><span>¥0</span>
			</div>
			<ul class="yp_myAccount_ul">
				<li>充值有礼</li>
				<li>充值卡兑换</li>
			</ul>
		</div>
		<div class="yp_myAccount_img">
			<img src="../assets/oneCenter02.png" />
		</div>
	</div>
</template>

<script>
	export default {
		name: "myaccount"
	}
</script>

<style scoped>
	.yp_myAccount {
		width: 1085px;
		height: 666px;
		float: left;
		margin-left: 20px;
	}
	
	.yp_myAccount_top {
		height: 222px;
		font-size: 18px;
		overflow: hidden;
		border: 1px solid lightgray;
		background-color: #f4fff2;
	}
	
	.yp_myAccount_top img {
		margin: 40px 20px 0;
		display: block;
		width: 140px;
		float: left;
	}
	
	.yp_myAccount_top p {
		width: 250px;
		line-height: 200px;
		float: left;
		margin-left: 30px;
	}
	
	.yp_myAccount_top p span {
		font-size: 20px;
		color: orange;
	}
	
	.yp_myAccount_money {
		width: 300px;
		height: 50px;
		float: left;
		margin-top: 120px;
	}
	
	.yp_myAccount_money span {
		line-height: 50px;
	}
	
	.yp_myAccount_money span:nth-of-type(even) {
		margin-left: 5px;
		color: orange;
	}
	
	.yp_myAccount_money span:nth-of-type(3) {
		margin-left: 30px;
	}
	
	.yp_myAccount_ul {
		width: 280px;
		float: right;
		margin-top: 70px;
	}
	
	.yp_myAccount_ul li {
		text-align: left;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		font-weight: 500;
		color: #4B943D;
	}
	
	.yp_myAccount_img img {
		width: 1083px;
		height: 395px;
		margin-top: 24px;
		/*border: 1px solid lightgray;*/
	}
</style>